<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weeks</title>

    <script src="/s/js/lib/jquery.min.js"></script>
    <script src="/s/js/lib/echarts.min.js"></script>

    <script src="/s/js/chart.js"></script>
    <link rel="stylesheet" href="/s/css/common.css">
    <style>
        .heatmap-chart {
            width: 100%;
            height: 400px;
        }

        .heatmap-box {
            width: 50%;
            height: 400px;
            float: left;
        }
    </style>
</head>
<body>
<nav class="nav">
    <button onclick="window.location='/s'">首页</button>
    <label for="heatMapWeeks">展示</label><input type="number" min="1" id="heatMapWeeks" value="6" style="width: 40px">周
    <button onclick="heatMapMultipleWithMerge()">合并生成</button>
    <button onclick="heatMapMultiple()">独立生成</button>
</nav>

<div id="multiHeatMap"></div>

</body>
<script>

    let created = []

    window.onload = function () {
        heatMapMultiple()
    }

    function heatMapMultipleWithMerge() {
        if (created.length !== 0) {
            for (let i = 0; i < created.length; i++) {
                created[i].dispose()
            }
        }
        created = []
        document.getElementById("multiHeatMap").className = '';
        document.getElementById("multiHeatMap").innerHTML = ''

        let weeks = $("#heatMapWeeks").val();

        handleGet('/weeksHeatMap?weeks=' + weeks, function (heatMaps) {
            console.log(heatMaps)
            for (let i = 0; i < heatMaps.data.length; i++) {
                let heatMap = heatMaps.data[i]
                let weekDom = document.createElement('div')
                weekDom.className = 'heatmap-box'
                let chartDom = document.createElement('div')
                chartDom.id = 'week' + i
                chartDom.className = 'heatmap-chart'
                weekDom.appendChild(chartDom)
                document.getElementById("multiHeatMap").appendChild(weekDom)

                let chart = echarts.init(document.getElementById(chartDom.id));
                created.push(chart)

                fillChartData(chart, heatMap)
            }
        })
    }


    function heatMapMultiple() {
        if (created.length !== 0) {
            for (let i = 0; i < created.length; i++) {
                created[i].dispose()
            }
        }
        created = []
        document.getElementById("multiHeatMap").className = '';
        document.getElementById("multiHeatMap").innerHTML = ''
        let now = new Date();
        let weekDay = now.getDay();

        let weeks = $("#heatMapWeeks").val();

        for (let i = 0; i < weeks; i++) {

            let weekDom = document.createElement('div')
            weekDom.className = 'heatmap-box'
            let chartDom = document.createElement('div')
            chartDom.id = 'week' + i
            chartDom.className = 'heatmap-chart'

            weekDom.appendChild(chartDom)
            document.getElementById("multiHeatMap").appendChild(weekDom)

            let offset = (weekDay) + 7 * i
            let param = '?length=7&offset=' + offset;
            heatmapChartApi(param, chartDom.id)
        }
    }

    function heatmapChartApi(param, elementId) {
        let chart = echarts.init(document.getElementById(elementId));
        created.push(chart)
        handleGet('/heatMap' + param, function (heatMap) {
            fillChartData(chart, heatMap.data);
        });
        return chart
    }

    function fillChartData(chart, heatMap) {
        // weekday, hour, count
        let data = heatMap.data.map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });

        let title = heatMap.start + " ➡️ " + heatMap.end + " [" + heatMap.total + "]"
        let option = {
            title: {
                text: title,
                left: 'center',
                align: 'right',
                top: '-5px'
            },
            tooltip: {
                position: 'top'
            },
            animation: false,
            grid: {
                height: '65%',
                top: '20px',
                right: 0,
                left: '85px',
                bottom: 0
            },
            xAxis: {
                type: 'category',
                data: hours,
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: days,
                splitArea: {
                    show: true
                }
            },
            visualMap: {
                min: 0,
                max: heatMap.max,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [{
                name: 'Hit Count',
                type: 'heatmap',
                data: data,
                label: {
                    show: true
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        chart.setOption(option);
    }
</script>
</html>